<script setup lang="ts">
import type { Clever } from "../scripts/Clever.interface";
import { Bus, CONN_CHAIN_CLEVER } from "@/connetion/Bus";
import { useClever } from "@/stores/clever";
import { getAvatar } from "../scripts/comm";
import { computed, onMounted } from "vue";
import NavTitle from "../../component/NavTitle/index.vue";
import JEmpty from "@/components/j-empty/index.vue";
import JNumber from "@/components/j-number/index.vue";
import JString from "@/components/j-string/index.vue";
import YIcons from "@/components/y-icons/index.vue";
import Icon from "../icon/qianbao.svg";
import { formatTimeAgo, formatTimestamp } from "@/comm/format";

import { useCore } from "@/hooks/useCore";
import TimeTips from "@/components/timeTips/index.vue";
import { useRouter } from "vue-router";
import { useLayout } from "@/stores/layout";
import { useKline } from "@/stores/kline";

let kline = useKline()
let layout = useLayout()
const router = useRouter()

const clever = useClever();
const core = useCore();

const listArr = computed<Clever[]>(() => {
  var ary = [...clever.clevers];
  ary = ary.slice(0, 5)
  ary.sort((a, b) => {
    return a.lastChangeToken.lastActive - b.lastChangeToken.lastActive < 0 ? 1 : -1;
  });
  console.log("list ary -------------------", ary);
  return ary;
});

clever.init();
onMounted(() => {
  Bus.on(CONN_CHAIN_CLEVER, (data: any) => {
    console.log('首页聪明钱推送 !!!!', data);
    if (Array.isArray(data)) {
      data.forEach(i => {
        clever.updateData(i);
      });
    } else {
      // const coin = kline.map.find(i => i.symbol === data.lastChangeToken.symbol + 'USDT');
      // data.lastChangeToken.lastPrice = coin?.lastPrice
      // // 
      // layout.changeSnackbar(true)
      // layout.setText(formatTimestamp(data.lastChangeToken.lastActive), data, 'wise')
      clever.updateData(data);
    }
  });
});
const toBrowser = function (item: any) {
  console.log(item);
  router.push(`/entity/${item.capitalInfoId}`);

};

const onToken = function (item: any) {
  // console.log(item);
  // window.open("/token/" + str);
  core.switchCoinByHash(item.lastChangeToken.contractAddress);
};

const onLog = (item: any) => {
  console.log(item);
};

const filterArr = (list: []) => {
  return list.filter((i: any) => i.balance)
}
function goMore(){
    router.push('/smartMoney')
}
</script>
<template>
  <div class="clever" id="smart-box">
    <NavTitle :is-more="true" class="title-right"  @more="goMore" :title="$t('message.Clever_Deal.title.a')" :icon="Icon"></NavTitle>
    <div class="bdy">
      <VRow class="c-title-5 c-clor had bord" no-gutters>
        <VCol class="col0" cols="3">{{ $t("message.Clever_Deal.a") }}</VCol>
        <VCol class="col1" cols="2">{{ $t("message.Clever_Deal.c") }}</VCol>
        <VCol class="col2" cols="2">{{ $t("message.Clever_Deal.b") }}</VCol>
        <VCol class="col3" cols="3">{{ $t("message.Clever_Deal.ls") }}</VCol>
        <VCol class="col4">{{ $t("message.Clever_Deal.ee") }}</VCol>
      </VRow>
      <div class="list c-title-4">
        <VRow class="bord" no-gutters v-for="item in listArr" @click="onLog(item)">
          <VCol class="col0" cols="3">
            <JString :title="item.name" :text="item.name" :max="14" @click="toBrowser(item)"></JString>
          </VCol>
          <VCol class="col1 c-bold" cols="2">
            <YIcons :items="filterArr(item.top5Token)" :total="item.totalUsd"></YIcons>
          </VCol>
          <VCol class="col2" cols="2">
            <JNumber :title="item.totalUsd" :num="item.totalUsd" prefix="$"></JNumber>
          </VCol>
          <VCol class="col3" cols="3">
            <div class="c-left">
              <span class="c-title-4 c-name" @click="onToken(item)">{{ item.lastChangeToken.symbol }}</span>
              <JNumber :title="item.lastChangeToken.balance" :num="item.lastChangeToken.balance" notbold></JNumber>
            </div>
            <JNumber class="c-right" :num="item.lastChangeToken.changeBalance" is-color></JNumber>
          </VCol>
          <VCol class="col4">
            <TimeTips :text="formatTimestamp(Number(item.lastChangeToken.lastActive))"> {{
              formatTimeAgo(item.lastChangeToken.lastActive) }}</TimeTips>

          </VCol>
        </VRow>
        <JEmpty v-if="listArr.length === 0"></JEmpty>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.title-right{
  padding-right: 20px;
}
.bdy {
  .list {

    // position: relative;
    .v-col {
      height: 38px;
      display: flex;
      align-items: center;
    }

    .v-row {
      flex-wrap: nowrap;
    }

    .v-row:last-child {
      &:before {
        content: "";
        border-bottom: none !important;
      }
    }
  }

  .col0 {
    text-wrap: nowrap;

    .icon {
      min-width: 20px;
      width: 20px;
      height: 20px;
      margin-right: 7px;
    }
  }

  .col3 {
    overflow: hidden;
    margin-left: 10px;
    // background-color: blue;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    .c-left {
      flex: 1.4 0 0;
      width: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      overflow: hidden;

      .c-name {
        color: #b1b6c6;
        margin-right: 4px;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .c-right {
      flex: 1 0 0;
      width: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 10px;
      overflow: hidden;
    }
  }

  .col4 {
    text-align: right;
    justify-content: flex-end;
    width: 74px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

:deep(._txt) {
  &:hover {
    text-decoration: underline;
  }
}
</style>
